<template>
    <div>
        <el-card class="login-card">
            <el-row>
                <el-col :span="12">
                    <img class="login-left-logo" src="https://img.js.design/assets/img/61a84081b65a297e35b8b686.png" alt="">
                </el-col>
                <el-col :span="12">
                    <div class="login-right-text">
                        <div class="content">
                            <el-row justify="center">
                                <el-col :span="18">
                                    <div>
                                        <h2>欢迎登录</h2>
                                        <el-tabs v-model="activeName" class="demo-tabs">
<!--                                            <el-tab-pane label="手机验证码登录" name="phone_login">-->
<!--                                                <phone_login></phone_login>-->
<!--                                            </el-tab-pane>-->
                                            <el-tab-pane label="用户名登录" name="username_login">
                                                <user_login></user_login>
                                            </el-tab-pane>
                                        </el-tabs>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import phone_login from '../../views/login/phone_login/index'
    import user_login from '../../views/login/user_login/index'
    import {reactive,toRefs} from 'vue'
    export default {
        name: "index",
        setup(){
            let data = reactive({
                activeName:'username_login'
            })
            return{
               ...toRefs(data)
            }
        },
        components:{
            phone_login,
            user_login
        }
    }
</script>

<style>
    .login-right-text .el-tabs__nav-wrap::after{
        width: 0px;
    }
    .login-right-text .el-tabs__nav-scroll{
        display: flex;
        justify-content: center;
        height: 50px;
    }
</style>

<style scoped>
    .login-card{
        width: 1200px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        align-items: center;
    }
    .login-left-logo{
        width: 100%;
    }
    .content{
        border: 1px solid rgba(245, 245, 245, 1);
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
        padding: 20px 50px 73px 50px;
    }
    .login-right-text{
        padding: 60px;
    }
    .login-right-text h2{
        line-height: 30px;
        text-align:center;
        color: rgba(51, 51, 51, 1);
        margin-bottom: 60px;
    }
</style>
